<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸</title>
    <link rel="stylesheet" href="../../CssTest/css/base.css">
    <script src="../../lib/jquery-3.4.1.js"></script>
    <style>

        #div1{

            width:200px;
            height: 200px;
            margin-top: 50px;
            margin-left: 100px;
            margin-bottom: 100px;
            padding-left: 100px;
            padding-right: 50px;
            padding-top: 50px;
            background-color: #8cebff;
            border: yellowgreen 40px solid;
        }

        button{

            display: block;
            margin-bottom: 10px;
            margin-top: 10px;
        }


    </style>
</head>
<body>


<div id="div1">可爱的你,爱哭的你</div>

<hr class="hr1">

<div class="title">width()/height()方法</div>

<button id="b1">获取长宽</button>

<p class="pMark">实际内容的宽和高,不包括内边距和bolder</p>


<div class="title">innerWidth()/innerHeight()</div>
<button id="b2">获取innerWidth</button>
<button id="b3">获取innerHeight</button>

<p class="pMark">包含内边距的宽和高,不包含bolder</p>

<div class="title">outerWidth/outerHeight</div>
<button id="b4">获取outwidth</button>
<button id="b5">获取outHeight</button>
<p class="pMark">包含内边距和bolder</p>



<button></button>













<script>

    $(document).ready(function () {

        $("#b1").click(function () {

            var width = $("#div1").width();
            var heigth = $("#div1").height();
            var tet = "宽度为" + width  + "高度为" + heigth;
            alert(tet);

        });

        $("#b2").click(function () {

            var innerWidth = $("#div1").innerWidth();

            alert(innerWidth);

        });

        $("#b3").click(function () {

            var innerHeight = $("#div1").innerHeight();
            alert(innerHeight);

        });

        $("#b4").click(function () {

            var outW = $("#div1").outerWidth();
            alert(outW);

        });

        $("#b5").click(function () {

            var outW = $("#div1").outerHeight();
            alert(outW);

        })













    });



</script>

</body>
</html>